import axios from "axios";
import React, { useEffect, useState } from "react";
import style from "./style.less";
import { Table } from "antd";
import {
  usePlayerStoreDispatch,
  // 一个action
  setMusicId,
  pushPlayList,
} from "@/components/Player/store/index.jsx";



/**
 * 获取请求歌单URL
 * @param {*} id
 * @returns
 */
function getSingleList () {
  return `http://123.207.32.32:9001/playlist/detail?id=2366527805`;
}

/**
 * 获取列表中需要的歌曲信息
 * @param {*} tracks
 * @returns list: 列表中要渲染的数据
 */
function getListInfo (tracks) {
  const list = [];

  let key = 0;
  tracks.forEach((item) => {
    const song = {};
    song.key = ++key;
    song.id = item.id;
    song.name = item.name;
    song.album = item.al.name;
    song.singer = item.ar[0].name;
    song.duration = item.dt;
    song.maskPic = item.al.picUrl;
    song.time = convertSongTime(item.dt);

    list.push(song);
  });

  return list;
}

// 歌曲时长转换为 分:秒格式，比如 03:45
function convertSongTime (time) {
  time = time / 1000; // 毫秒转为秒
  let totalMinute = time / 60; // 计算为分钟数

  let min = Math.floor(totalMinute);
  let second = parseInt((totalMinute - min) * 60).toString();

  if (second.length === 1) second = "0" + second; // 秒数补0

  return `${min}:${second}`;
}

const Rank = (props) => {
  let id = props.match.params.id;

  const [list, setList] = useState([]);
  const [tracks, setTracks] = useState([]);

  let data;
  const dispatch = usePlayerStoreDispatch();

  const columns = [
    {
      title: "标题",
      dataIndex: "name",
      key: "name",
      ellipsis: true,
      render: (text, record) => {
        return (
          <div className={style.songName}
            onDoubleClick={() => {
              changeCurrentMusic(record, dispatch);
            }}
          >
            {text}
          </div>
        );
      },
    },
    {
      title: "歌手",
      dataIndex: "singer",
      key: "singer",
    },
    {
      title: "专辑",
      dataIndex: "album",
      key: "album",
      ellipsis: true,
    },
    {
      title: "时长",
      dataIndex: "time",
      key: "time",
    },
  ];

  /**
  * 点击歌曲名称播放 + 添加至播放列表
  * @param {*} id
  */
  function changeCurrentMusic (record, dispatch) {
    console.log(id);
    dispatch(setMusicId(record.id));
    dispatch(pushPlayList(record));
  }

  // 获取歌单详情
  useEffect(async () => {
    // axios.defaults.withCredentials = true;
    const result = await axios.get(getSingleList(id));
    setList(result.data.playlist);
    setTracks(result.data.playlist.tracks);
  }, []);

  useEffect(() => {
    getListInfo(tracks);
  }, [tracks]);

  data = getListInfo(tracks);

  return (
    <div className={style.rank}>
      <div className={style.rankHeader}>
        <div className={style.rankImg}>
          <img src={list.coverImgUrl} />
        </div>

        <div className={style.rankInfo}>
          <div className={style.rankTitle}>热门推荐：{list.name}</div>
          <div className={style.rankDesc}>{list.description}</div>
        </div>
      </div>
      <Table columns={columns} dataSource={data} className={style.rankTable} />
    </div>
  );
};

export default Rank;